<template>
    <div class="user">
      <div class="wrap">
          <input class="select" v-model="serach" type="text" @keyup="onSearch()" placeholder="请输入关键字">
          <div class="select">
             <el-button-group>
                 <el-button plain @click="openDialog" >批量绑定角色</el-button>
                 <el-button plain @click="toUserInsert" v-if="checkAction(2)" >新增用户</el-button>
               </el-button-group>
          </div>
      </div>
      <el-table
         ref="multipleTable" 
         :data="tableData"
         tooltip-effect="dark"
         border
         style="width: 100%"
         @selection-change="handleSelect"
         >
         <el-table-column type="selection" width="55">
         </el-table-column>
        
         <el-table-column prop="id" label="id" >
         </el-table-column>
         <el-table-column prop="username" label="账号" >
         </el-table-column>
         <el-table-column prop="role" label="角色" >
         </el-table-column>
         <el-table-column prop="nickname" label="姓名" >
         </el-table-column>
         <el-table-column   label="操作"  width="200" >
          <template slot-scope="scope">
              <el-button-group>
                <el-button size="mini" @click="permission(scope.row)" class="update" v-if="checkAction(42)" >权限</el-button>
                <el-button  size="mini" @click="edit(scope.row)" class="update" v-if="checkAction(3)">编辑</el-button>
                <el-button  size="mini"  @click="del(scope.row)" class="update" v-if="checkAction(4)">删除</el-button>  
              </el-button-group>
          </template>
         </el-table-column>
       </el-table>
       
       <div class="action">
         <el-pagination
            ref=multipleTable
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage"
           :page-sizes="pageSize"
           :page-size="100"
           layout="total, sizes, prev, pager, next, jumper"
           :total="count">
          </el-pagination>
       </div>
       <el-dialog
         title="请选择需要绑定的角色"
         :visible.sync="dialogVisible"
         width="50%"
       >
         <div >
           <span>角色</span>
           <el-select v-model="select" class="select"  slot="prepend" multiple placeholder="请选择" >
            <el-option v-for="item in roles" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="save()" class="green">确 定</el-button>
         </span>
       </el-dialog>
     </div>
 </template>
 <script>
 export default{
   data:()=>{
       return{
         tableData: [],
         multipleSelection: [],
         count:0,
         currentPage:1,
         pageSize:[2,4,6,8],
         select:[],
         index:0,
         serach:'',
         dialogVisible:false,
         roles:[],
         selection:[],
       }
   },
   async created() {
      let res=await this.$http('user/page?currentPage='+this.currentPage+'&pageSize='+this.pageSize[this.index]);
      console.log(res)
      this.tableData=res.data.list;
      this.count=res.data.count;  

      let roles=await this.$http('role/select');
      console.log(roles)
      this.roles=roles.data;
   },
   methods: {
    handleSelect(selection){
      for(let i=0;i<selection.length;i++){
        this.selection.push(selection[i].id)
      }
     
    },
     async handleSizeChange(val) {
         // console.log(`每页 ${val} 条`);
         for(let i=0;i<this.pageSize.length;i++){
           if(this.pageSize[i]==val){
             this.index=i;
             let res=await this.$http('user/page?currentPage='+this.currentPage+'&pageSize='+this.pageSize[this.index]);
             this.tableData=res.data.list;
             return
           }
         }
        
       },
     async  handleCurrentChange(val) {
         // console.log(`当前页: ${val}`);
         this.currentPage=val;
         let res=await this.$http('user/page?currentPage='+this.currentPage+'&pageSize='+this.pageSize[this.index]);
        //  console.log(res);
         this.tableData=res.data.list;
       },
     async onSearch(){
       let res=await this.$http('user/page?key='+this.serach);
       this.tableData=res.data.list;
     },
     openDialog(){
       this.dialogVisible=true;
       this.select=[];
     },
     permission(row){
      this.$router.push({path:`/user/permission/${row.id}`} );
     },
     edit(row){
      this.$router.push({path:`/userEdit/${row.id}`} );
     },
    async del(row){
      let res=await this.$http.post('user/trash',{
        id:row.id,
      });
      let res1=await this.$http('user/page?currentPage='+this.currentPage+'&pageSize='+this.pageSize[this.index]);
      this.tableData=res1.data.list;
      this.count=res1.data.count;  
     },
     async save(){  
        this.dialogVisible = false;
        let res=await this.$http.post('user/role/update',{
           userIds:this.selection,
            roleIds:this.select
        });
        let res1=await this.$http('user/page?currentPage='+this.currentPage+'&pageSize='+this.pageSize[this.index]);
         console.log(res1);
         this.tableData=res1.data.list;
      },
      toUserInsert(){
        this.$router.push('/UserInsert');
      }

   },
   
 }
 </script>
 <style scoped>
   .user{
     margin: 20px;
   }
 .wrap{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
 .wrap .select{
     height: 40px;
     border: 1px solid #DCDFE6;
     border-radius: 5px;
     margin-bottom: 20px;
 }
 .select{
   margin: 20px;
 }
 input::-webkit-input-placeholder{
      color: #DCDFE6;
 }
 .action{
  display: flex;
  flex-direction: row-reverse;
  margin: 20px;
 }
 
 .update{
   border: none;
   color: #008080;
 }
 .green{
   background-color: #008080;
 }
 
 </style>